﻿<!DOCTYPE html>
<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--<meta name="viewport" content="initial-scale=1,width=device-width, height=device-height,user-scalable=no,maximum-scale=1, minimum-scale=1" />
         <meta name="apple-mobile-web-app-capable" content="yes">
					<meta name="apple-mobile-web-app-status-bar-style" content="black">
					<meta name="format-detection" content="telephone=no">-->

	
	
	<!--<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>-->
	<title>手写签名</title>
	<script type="text/javascript" src="../jquery-3.1.1.min.js" ></script>
	<script type="text/javascript" src="../ajaxfileupload.js" ></script>
	<style type="text/css">
		#canvas {}
	</style>
</head>
	<body id="bb">
		<div id="canvasDiv"></div>
		<br><br><br>
		<button id="btn_clear">清除</button>
		<button id="btn_submit">提交</button>
	<script language="javascript">

	try {
   		function onDocumentTouchStart(event) {
			if(event.touches.length == 1) {
				event.preventDefault();
				// Faking double click for touch devices
				var now = new Date().getTime();
				if(now - timeOfLastTouch < 250) {
					reset();
					return;
				}
				timeOfLastTouch = now;
				mouseX = event.touches[0].pageX;
				mouseY = event.touches[0].pageY;
				isMouseDown = true;
			}
		}
		function onDocumentTouchMove(event) {
			if(event.touches.length == 1) {
				event.preventDefault();
				mouseX = event.touches[0].pageX;
				mouseY = event.touches[0].pageY;
			}
		}
		function onDocumentTouchEnd(event) {
			if(event.touches.length == 0) {
				event.preventDefault();
				isMouseDown = false;
			}
		}
		var canvasDiv = document.getElementById('canvasDiv');
		var canvas = document.createElement('canvas');
		var canvasWidth = 1191;
		var canvasHeight = 670;
		document.addEventListener('touchmove', onDocumentTouchMove, false);
		/*document.addEventListener('touchstart', onDocumentTouchStart, true);
		document.addEventListener('touchend', onDocumentTouchEnd, true);*/
		var point = {};
		point.notFirst = false;
		canvas.setAttribute('width', canvasWidth);
		canvas.setAttribute('height', canvasHeight);
		canvas.setAttribute('id', 'canvas');
		canvasDiv.appendChild(canvas);
		if(typeof G_vmlCanvasManager != 'undefined') {
			canvas = G_vmlCanvasManager.initElement(canvas);
		}
		var context = canvas.getContext("2d");
		var img = new Image();
		img.src = "./write.jpg";
		img.onload = function() {
			var ptrn = context.createPattern(img, 'no-repeat');
			context.fillStyle = ptrn;
			context.fillRect(0, 0, canvas.width, canvas.height);
		}
		canvas.addEventListener("touchstart", function(e) {
			console.log("touchstart");
			var mouseX = e.touches[0].pageX - this.offsetLeft;
			var mouseY = e.touches[0].pageY - this.offsetTop;
			paint = true;
			addClick(e.touches[0].pageX - this.offsetLeft, e.touches[0].pageY - this.offsetTop);
			redraw();
		});
		canvas.addEventListener("touchend", function(e) {
			console.log("touchend");
			paint = false;
		});
		canvas.addEventListener("touchmove", function(e) {
			console.log("touchmove");
			console.log(e);
			console.log("触摸坐标:"+(e.touches[0].clientX - this.offsetLeft)+","+(e.touches[0].clientY - this.offsetTop));
			if(paint) {
				addClick(e.touches[0].pageX - this.offsetLeft, e.touches[0].pageY - this.offsetTop, true);
				redraw();
			}
		});
		canvas.addEventListener("mousedown", function(e) {
			console.log("mousedown");
			var mouseX = e.pageX - this.offsetLeft;
			var mouseY = e.pageY - this.offsetTop;
			paint = true;
			addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
			redraw();
		});
		canvas.addEventListener("mousemove", function(e) {
			console.log(e);
			/*console.log(this.offsetLeft);
			console.log(this.offsetTop);*/
			console.log("鼠标坐标:"+(e.pageX - this.offsetLeft)+","+(e.pageY - this.offsetTop));
			console.log("mousemove");
			if(paint) {
				addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
				redraw();
			}
		});
		canvas.addEventListener("mouseup", function(e) {
			console.log("mouseup");
			paint = false;
		});
		canvas.addEventListener("mouseleave", function(e) {
			console.log("mouseleave");
			paint = false;
		});
		var clickX = new Array();
		var clickY = new Array();
		var clickDrag = new Array();
		var paint;
		function addClick(x, y, dragging)
		{
			clickX.push(x);
			clickY.push(y);
			clickDrag.push(dragging);
			console.debug(clickDrag);
		}
		function redraw() {

			//canvas.width = canvas.width; // Clears the canvas
			context.strokeStyle = "black";
			context.lineJoin = "round";
			context.lineWidth = 5;
			while(clickX.length > 0) {

				point.bx = point.x;
				point.by = point.y;
				point.x = clickX.pop();
				point.y = clickY.pop();
				console.log(point.x);
				console.log(point.y);
				/*alert(point.x);
				alert(point.y);*/
				point.drag = clickDrag.pop();
				context.beginPath();
				if(point.drag && point.notFirst) {
					context.moveTo(point.bx, point.by);
				} else {
					point.notFirst = true;
					context.moveTo(point.x - 1, point.y);
				}
				context.lineTo(point.x, point.y);
				context.closePath();
				context.stroke();
			}





			  for(var i=0; i < clickX.length; i++)
			  {
				context.beginPath();
				if(clickDrag[i] && i){
				  context.moveTo(clickX[i-1], clickY[i-1]);
				}else{
				   context.moveTo(clickX[i]-1, clickY[i]);
				}
				 context.lineTo(clickX[i], clickY[i]);
				 context.closePath();
				 context.stroke();
			  }
				  
				  
				  
				  
				  
				  
		}
		var clear = document.getElementById("btn_clear");
		var submit = document.getElementById("btn_submit");
		var i =0;
		clear.addEventListener("click", function() {
			canvas.width = canvas.width;
		});
		submit.addEventListener("click", function() {
			$("#file").attr("src", canvas.toDataURL("image/png"));
			/*imgData = canvas.toDataURL("image/png").replace("image/png",'image/octet-stream');
			var saveFile = function(data, filename) {
				var save_link = document.createElementNS('a');
				save_link.href = data;
				save_link.download = filename;

				var event = document.createEvent('MouseEvents');
				event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
				save_link.dispatchEvent(event);
			}
			i=i+1;
			var filename = "测试签名" +i+ '.' + "png";
			saveFile(imgData,filename);*/
			$.ajax({
				url: '/sign/uploadSign',
				type: 'POST',
				data: {img:canvas.toDataURL("image/png")},
				success: function (data){
					if(data=="yes"){
						alert("上传图片成功")
					}
				},
				error:function(data,status,e){
					alert(e);
				}
			});
		});
 
   }
	catch(err) {
	   txt="本页中存在错误。\n\n"
	   txt+="错误描述：" + err.description + "\n\n"
	   txt+="点击“确定”继续。\n\n"
	   alert(txt)
   }
	</script>
			<img id="file" />
	</body>
</html>